iView 常用组件

iView

iView 是一套基于 Vue.js 的 UI 组件库。

在一些场景下，使用 iView 对于项目的开发效率会有一定程度的提升，这里主要精简的列出一些开发中使用频率较高的组件。

引入

• CDN

  <!-- import Vue.js -->
  <script src="//vuejs.org/js/vue.min.js"></script>
  <!-- import stylesheet -->
  <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
  <!-- import iView -->
  <script src="//unpkg.com/iview/dist/iview.min.js"></script>

• NPM

  //安装 
  npm install iview --save
  
  //引用
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import App from 'components/app.vue';
  import Routers from './router.js';
  import iView from 'iview';
  import 'iview/dist/styles/iview.css';
  
  Vue.use(VueRouter);
  Vue.use(iView);
  
  // The routing configuration
  const RouterConfig = {
      routes: Routers
  };
  const router = new VueRouter(RouterConfig);
  
  new Vue({
      el: '#app',
      router: router,
      render: h => h(App)
  });

• iView-admin

    iView-admin是iView生态中的成员之一，是一套采用前后端分离开发模式，基于Vue的后台管理系统前端解决方案。
    iView-admin2.0脱离1.x版本进行重构，换用Webpack4.0 + Vue-cli3.0作为基本开发环境。
    内置了开发后台管理系统常用的逻辑功能，和开箱即用的业务组件，旨在让开发者能够以最小的成本开发后台管理系统，降低开发量。
  

相关使用移步 iView-admin2.0

组件

Breadcrumb

<Breadcrumb>
    <BreadcrumbItem to="/">Home</BreadcrumbItem>
    <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
    <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Input

<Input v-model="inputValue" type="text" placeholder="please enter" />

<InputNumber v-model="inputValue" :min="0" :max="100" :step="5" placeholder="please enter" />

Select

<Select v-model="selectValue" disabled>
    <Option v-for="item in listData" :value="item.value" :key="item.key">{{ item.value }</Option>
</Select>

Button

<Button type="primary" @click="startModel">Button</Button>

Table

<Table :data="tableData" :loading="isLoading" :columns="column" @on-selection-change="callback"></Table>

Page

<Page 
    :total="totalCount" 
    :current.sync="current" 
    :page-size-opts="[10, 20]" 
    @on-change="changePage" 
    @on-page-size-change="changePageSize" 
    show-elevator 
    show-total 
    show-sizer>
</Page>

Message

//global config
this.$Message.config({
    top: 100
})

//config for current component
this.$Message.info({
    content: 'MESSAGE',
    duration: 5
})

this.$Message.error('ERROR')

Model

<Modal  
    v-model="title"
    title="提示信息"
    @on-ok="sureCallback"
    @on-cancel="cancelCallback">
        Content
</Modal>

Menu

<Menu :active-name="activeName" theme="light" width="200px" :open-names="openName" ref="side_menu">
    <MenuItem name="one" to="">
      <Icon type="ios-analytics"></Icon>
      item1
    </MenuItem>
    <Submenu name="two">
      <template slot="title">
        <Icon type="ios-navigate"></Icon>
        item2
      </template>
      <MenuItem name="one-two" to=""></MenuItem>
    </Submenu>
</Menu>

export default {
    mounted() {
        this.$nextTick(() => {
          //echo and expand selected menu
          this.$refs.side_menu.updateOpened();
          this.$refs.side_menu.updateActiveName();
        });
    }
}

布局

Layout

<div class="layout">
    <Layout>
        <Header>
        
        </Header>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
            
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
                <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                    Content
                </Content>
            </Layout>
        </Layout>
    </Layout>
</div>